<template>
    <div class="content-list">
        <div class="content" v-for="video in VideoList" :key="video.id">
            <Card :video="video"></Card>
        </div>
        <AddMore :VideoList="VideoList"></AddMore>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import homeApi, {
    type VideoListModel,
    type ContentModel,
} from "@/api/mockHome";
import useHomeStore from "@/stores/modules/home";
const homeStore = useHomeStore();

const VideoList = ref<ContentModel[]>([]);
console.log(homeStore.videoList);

const getVideos = async () => {
    try {
        const result = await homeApi.getVideoList();
        VideoList.value = result.content;
        console.log(VideoList);
        console.log(result);
    } catch (error) {
        console.log(error);
    }
};

onMounted(() => {
    getVideos();
    homeStore.getHomeRecommend();
});

const { videoList } = homeStore;
console.log(homeStore);
console.log(videoList);
</script>

<style scoped lang="scss">
.content-list {
    display: flex;
    flex-wrap: wrap;

    // margin-top: 10px;
    .content {
        margin-right: 20px;

        &:nth-child(5n) {
            margin-right: 0;
        }

        margin-bottom: 20px;
    }
}
</style>
